<template>
	<view class="content">
		<view class="bar">
			<text class="left">搜索</text>
			<text class="right" @click="back">取消</text>
		</view>

		<!-- input -->
		<view class='inp'>
			<uni-icons class="icons" type="search" size="18"></uni-icons>
			<input type="text" placeholder='折扣直降狂欢' placeholder-style="font-size:12px;">
			<button class="btn" type="primary" size='mini'>搜索</button>
		</view>

		<view class="discover">
			<text>搜索发现</text>
			<view class="tag">
				<view class="tag-item" v-for="item in taglist">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taglist: ['养肤补水面膜', '轻熟肌抗氧精华', '畅销底妆合辑', '清爽元气香氛', '个护好物盘点']
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.bar {
		width: 750rpx;
		justify-content: space-between;
		align-items: center;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-bottom: $uni-spacing-col-lg;

		.left {
			font-size: $uni-font-size-title;
			font-weight: bold;
			letter-spacing: 10rpx;
		}

		.right {
			letter-spacing: 5rpx;
		}
	}

	.inp {
		width: 700rpx;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.icons {
			position: absolute;
			left: 10rpx;
		}

		input {
			background-color: $uni-bg-color-grey;
			width: 100%;
			height: 60rpx;
			padding-left: 50rpx;
			padding-right: 160rpx;
			margin: 0 auto;
			border-radius: 20rpx 0 0 20rpx;

		}

		.btn {
			position: absolute;
			right: 0;
			width: 140rpx;
			flex-direction: row;
			height: 60rpx;
			background-color: black;
			line-height: 60rpx;
		}
	}

	.discover {
		width: 750rpx;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		flex-direction: column;

		>text {
			font-size: $uni-font-size-base;
			font-weight: bold;
			margin: $uni-spacing-col-lg 0;
		}

		.tag {
			width: 100%;
			flex-wrap: wrap;

			.tag-item {
				background-color: #eee;
				padding: $uni-spacing-col-base $uni-spacing-row-lg;
				font-size: $uni-font-size-sm;
				border-radius: $uni-border-radius-lg;
				margin-bottom: $uni-spacing-col-base;
				margin-right: $uni-spacing-row-base;
			}
		}
	}
</style>
